<template>
  <p-modal
    v-model="visible"
    :title="title"
    :body-style="{
      height: '590px',
    }"
    :width="1000"
    :mask-closable="false"
    :dialog-style="{ top: '40px' }"
    :get-container="getContainer"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="content-container">
      <div class="connect_div">
        <div class="form_one">
          <div class="input_div">
            <p-input v-model="form.code" class="input" placeholder="请输入" />
            <span class="label">客户编号</span>
          </div>
          <div class="input_div">
            <p-input
              v-model="form.customerName"
              class="input"
              placeholder="请输入"
            />
            <span class="label">客户名称</span>
          </div>
          <div class="input_div">
            <p-input v-model="form.name" class="input" placeholder="请输入" />
            <span class="label">客户简称</span>
          </div>
          <div class="input_div" />
        </div>
        <div class="form_one">
          <div class="input_div">
            <SelectOrg
              v-model="form.salesOrgCode"
              class="input"
              @input="handleOrgChange"
            />
            <span class="label">销售组织</span>
          </div>
          <div class="input_div">
            <SelectOrg
              v-model="form.salesGroupCode"
              :has-default="false"
              class="input"
              :parent-id="parentId"
              :options="orgGroupOptions"
            />
            <span class="label">销售组</span>
          </div>
          <div class="input_div">
            <SelectOrg
              v-model="form.pmGroupCode"
              :has-default="false"
              class="input"
              :parent-id="parentId"
              :options="orgKapmOptions"
              @input="handlePMGroupChange"
            />
            <span class="label">KAPM组</span>
          </div>
          <div class="input_div">
            <p-button
              class="button"
              type="primary"
              style="height: 32px !important"
              @click="search"
            >
              搜索
            </p-button>
            <p-button
              class="button"
              style="height: 32px !important"
              @click="resForm"
            >
              重置
            </p-button>
          </div>
        </div>
      </div>
      <p-button @click="addUser">新增客户</p-button>
      <p-table
        class="table-list-container"
        row-key="id"
        :columns="columns"
        bordered
        :scroll="{ x: 1400, y: 300 }"
        :data-source="dataSource"
        :pagination="paginationMixin"
        :row-selection="rowSelectionMixin"
        @change="handleTableChange"
      >
        <a
          slot="code1"
          slot-scope="text, record"
          @click="$emit('number-click', record)"
        >
          {{ text }}
        </a>
      </p-table>
    </div>
  </p-modal>
</template>

<script>
import { postCustomerList } from '@/api/customer';
import mixinTable from '@/mixins/mixin-table.js';
const defaultForm = {
  code: '',
  name: '',
  customerName: '',
  salesOrgName: '',
  salesGroupName: '',
  salesGroupCode: '',
  pmGroupCode: '',
};
export default {
  mixins: [mixinTable],
  props: {
    title: {
      type: String,
      default: '选择客户',
    },
    getContainer: {
      type: Function,
      default: () => document.body,
    },
    value: {
      type: [String, Number],
      default: undefined,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      form: {
        ...defaultForm,
      },
      parentId: '',
    };
  },

  computed: {
    typeOptions() {
      return this.$store.state.dictionary.dict['customer_type'] || {};
    },
    orgGroupOptions() {
      return this.$store.getters.getOrg({
        code: this.form.salesOrgCode,
        type: 'sales',
        isDict: false,
      });
    },
    orgKapmOptions() {
      return this.$store.getters.getOrg({
        code: this.form.salesOrgCode,
        type: 'kapm',
        isDict: false,
      });
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '客户编号',
          dataIndex: 'code',
          scopedSlots: { customRender: 'code' },
          ellipsis: true,
        },
        {
          align: 'center',
          title: '客户名称',
          dataIndex: 'customerName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '客户简称',
          dataIndex: 'name',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '客户类型',
          dataIndex: 'isSubmersible',
          customRender: (text) => (text ? '正式客户' : '潜在客户'),
          ellipsis: true,
        },
        {
          align: 'center',
          title: '销售组织',
          dataIndex: 'salesOrgName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: 'KAPM组',
          width: 150,
          dataIndex: 'pmGroupName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '销售组',
          dataIndex: 'salesGroupName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建人',
          dataIndex: 'createUserName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建时间',
          width: 150,
          dataIndex: 'createTime',
          ellipsis: true,
        },
      ];
      return columns;
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.paginationMixin = {
          pageSizeOptions: ['10', '20', '50', '100'],
          showSizeChanger: true,
          // showQuickJumper: true,
          current: 1,
          pageSize: 10,
          total: 0,
        };
        val && this.getList();
      },
    },
  },
  created() {
    this.rowSelectionMixin.type = 'radio';
  },
  methods: {
    addUser() {
      const routeUrl = this.$router.resolve({
        path: '/customer-creation',
        query: {
          type: 'addCustomer',
        },
      });
      window.open(routeUrl.href);
    },
    handleOrgChange(val) {
      this.form.salesGroupCode = '';
      this.form.pmGroupCode = '';
      this.orgGroupOptions = [];
      if (!val) return;
      this.parentId = val;
    },
    // handleGroupChange(val) {
    //   console.log('val: ', val);
    //   this.form.salesGroupCode = val;
    // },
    // handlePMGroupChange(val) {
    //   this.form.pmGroupCode = val;
    // },
    // handleTableChange(pagination) {
    //   this.paginationMixin.current = pagination.current;
    //   this.paginationMixin.pageSize = pagination.pageSize;
    // },
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      // this.asc = sorter.order === 'ascend' ? true : false;
      // this.columnKey = sorter.columnKey;
      this.paginationMixin = page;
      this.getList();
    },

    search() {
      this.getList();
    },
    resForm() {
      this.paginationMixin = {
        current: 1,
        pageSize: 10,
      };
      console.log('this.paginationMixin : ', this.paginationMixin);
      this.form = { ...defaultForm };

      this.getList();
    },
    async getList() {
      const result = await postCustomerList({
        ...this.form,
        pageSize: this.paginationMixin.pageSize,
        current: this.paginationMixin.current,
      });
      this.paginationMixin.total = result.data.data?.total;
      this.dataSource = result?.data?.data?.records || [];
    },
    handleCancel() {
      this.rowSelectionMixin.selectedRowKeys = [];
      this.form = { ...defaultForm };
      this.$emit('update:visible', false);
      this.$emit('cancel', false);
    },
    handleOk() {
      const keys = this.rowSelectionMixin.selectedRowKeys;
      if (!keys.length) {
        this.$message.error('请选择客户！');
        return;
      }
      const current = this.dataSource.find((item) => item.id === keys[0]);
      console.log(current, '----------');
      this.$emit(
        'change',
        {
          key: current.code,
          label: current.name,
          customerName: current.customerName,
          salesOrgCode: current.salesOrgCode,
          salesOrgName: current.salesOrgName,
          salesGroupCode: current.salesGroupCode,
          pmGroupCode: current.pmGroupCode,
          salesGroupName: current.salesGroupName,
          pmGroupName: current.pmGroupName,
          salesAreaName: current.area || '',
        },
        this.index
      );
      console.log(current, 'current');
      this.handleCancel();
    },
  },
};
</script>

<style lang="less" scoped>
.content-container {
  // width: 100%;
  // display: flex;
  // align-items: center;
  // font-size: 20px;
  // .content {
  //   display: flex;
  //   justify-content: center;
  //   flex: 1;
  // }

  .table-list-container {
    margin-top: 20px;
  }

  .poros-form {
    padding: 10px 20px;
    width: 100%;
    border-bottom: 1px solid #e5e6e9;
  }
  .poros-form-item {
    width: 30%;
    margin-bottom: 10px;
  }
  /deep/ .poros-form-item-control-wrapper {
    width: calc(100% - 70px);
  }
  .btn-search {
    margin-right: 16px;
  }
}
.connect_div {
  width: 100%;
  background-color: #f7f7f8;
  height: 90px;
  margin-bottom: 20px;
}

.form_one {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: space-around;
}
.input_div {
  width: 30% !important;
  line-height: 30px;
  margin-top: 7.5px;
}
.input {
  width: 60% !important;
  float: right;
}
.label {
  float: right;
  margin-right: 10px;
}
.button {
  margin-left: 10px;
}
</style>
